<template>
	<view class='index_page'>
		<!-- 首页 -->
		<view class='nav_tabBar'>
			<view class='status_bar'></view>
			<view class='nav_item'>
				<view class='icon' @tap='search'>
					<text class="iconfont icon-sousuo"></text>
				</view>
				<view class='tabBar_list'>
					<view 
						:class='{on: navTab_index == t_index}' 
						v-for='(tab,t_index) in navTab' :key='t_index'
						@tap='navTabBar(t_index)'>{{tab}}</view>
				</view>
				<view class='icon'>
					<text class="iconfont icon-caidan1"></text>
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
		</view>
		
		<!-- 关注 -->
		<attention v-if='navTab_index == 0' :reach_bottom='reach_bottom' :pull_down='pull_down'></attention>
		<!-- 分类 -->
		<topic v-if='navTab_index == 1' :reach_bottom='reach_bottom' :pull_down='pull_down'></topic>
		<!-- 小视频 -->
		<min-video v-if='navTab_index == 2'></min-video>

		<!-- 长按文章的扩展功能 -->
		<article-extend></article-extend>
	</view>
</template>

<script>

	import attention from './views/attention.vue';
	import topic from './views/topic.vue';
	import minVideo from './views/minVideo.vue';

	export default {
		components: {
			attention,
			topic,
			minVideo
		},
		data(){
			return {
				navTab: ['关注','专题','小视频'],
				navTab_index: 1,
				reach_bottom: 0,
				pull_down: 0,
			}
		},
		async onReady() {
			// 获取导航栏高度
			this.$store.state.nav_height = await this.$getDomInfo(".nav_tabBar","height")
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pull_down++;
		},
		// 触底
		onReachBottom() {
			this.reach_bottom++;
		},
		methods: {
			navTabBar(index) {
				this.navTab_index = index;
				this.$store.state.navTab_index = index;
			},
			// 搜索
			search() {
				uni.navigateTo({
					url: '../search/globalSearch'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.index_page {
	width: 100%;
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}
	.nav_tabBar {
		width: 100%;
		background: #0084FF;
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		.nav_item {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon {
				height: 100%;
				display: flex;
				align-items: center;
				padding: 0 15upx;
				box-sizing: border-box;
				.iconfont {
					width: 80upx;
					height: 100%;
					font-size: 45upx;
					// margin-left: 30upx;
					display: inline-block;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.tabBar_list {
				display: flex;
				>view {
					height: 100%;
					padding: 0 40upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					color: #80C2FF;
				}
				.on {
					color:#fff;
				}
			}
		}

	}

}
</style>